<template>
  <div v-loading="loading">
    <div style="margin-top: 10px;display: flex;justify-content: center">
      <el-input
        placeholder="默认展示部分书籍，可以通过书名搜索..."
        prefix-icon="el-icon-search"
        v-model="keywords"
        style="width: 400px"
        size="small"
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="small"
        style="margin-left: 3px"
        @click="searchClick"
        >搜索
      </el-button>
    </div>

    <div style="display: flex;justify-content: space-around;flex-wrap: wrap">
      <el-card
        style="width:220px;margin-top: 10px;"
        v-for="(book, index) in books"
        :key="index"
        v-loading="cardloading[index]"
      >
        <img class="image" :src="book.image">
        <div slot="header" style="text-align: left">
          <span>{{ book.name }}</span>
        </div>

        <div>

          <div
            style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px"
          >
            <span>价格:</span><span>{{ book.price }}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>剩余库存:</span><span>{{ book.num }}</span>
          </div>
          <div
            style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px"
          >
            <span>作者:</span><span>{{ book.author }}</span>
          </div>
          <div
          style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">
              <el-input-number size="mini" v-model="book.count" @change="handleChange" :min="1" :max="book.num"></el-input-number>
          </div>

          <div
            style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px"
            class="wrap_one"
          >
            <span>简介:</span><br>
            <span>{{ book.description }}</span>
          </div>

          <div>
            <el-col :offset="9">
              <el-button
                type="success"
                size="small"
                icon="el-icon-star-off"
                circle
                @click="addCart(book)"
              ></el-button>
            </el-col>
          </div>
          <!-- <div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">
            <span>用户角色:</span>
            <el-tag
              v-for="role in user.roles"
              :key="role.id"
              size="mini"
              style="margin-right: 8px"
              type="success">
              {{role.name}}
            </el-tag>
            <el-popover
              placement="right"
              title="角色列表"
              width="200"
              :key="index+''+user.id"
              @hide="saveRoles(user.id,index)"
              trigger="click" v-loading="eploading[index]">
              <el-select v-model="roles" :key="user.id" multiple placeholder="请选择" size="mini">
                <el-option
                  v-for="(item,index) in allRoles"
                  :key="user.id+'-'+item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-button type="text" icon="el-icon-more" style="padding-top: 0px" slot="reference"
                         @click="showRole(user.roles,user.id,index)"></el-button>
            </el-popover>
          </div> -->
        </div>

      </el-card>
    </div>
  </div>
</template>
<script>
import { getRequest, myPostRequest } from "../utils/api";
import { putRequest } from "../utils/api";
import { deleteRequest } from "../utils/api";
export default {
  mounted: function() {
    this.loading = true;
    this.loadBookList();
  },
  methods: {
    deleteUser(id) {
      var _this = this;
      this.$confirm("删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          _this.loading = true;
          deleteRequest("/admin/user/" + id).then(
            resp => {
              if (resp.status == 200 && resp.data.status == "success") {
                _this.$message({ type: "success", message: "删除成功!" });
                _this.loadUserList();
                return;
              }
              _this.loading = false;
              _this.$message({ type: "error", message: "删除失败!" });
            },
            resp => {
              _this.loading = false;
              _this.$message({ type: "error", message: "删除失败!" });
            }
          );
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    loadBookList() {
      var _this = this;
      // 模拟数据 book
      _this.books = [
        {
          id: 1,
          name: "C++ Primer Plus",
          num : 50,
          author: 'C++之父',
          price: 49,
          image: "http://img3m4.ddimg.cn/40/14/22783504-1_b_4.jpg",
          description: "C++ 10年大成",
          category: {
              id: 1,
              name: 'C++',
              description: ''
          }
        },
        {
          id: 2,
          name: "Java从入门到精通",
          num: 30,
          author: '咖啡',
          price: 29,
          image: "http://img3m1.ddimg.cn/29/32/26912981-1_b_4.jpg",
          description: "Java 从入门到入坟",
          category: {
              id: 2,
              name: 'SpringBoot',
              description: ''
          }
        },
        {
          id: 3,
          name: "汇编",
          num: 22,
          author: '余老师',
          price: 21,
          image: "http://img3m3.ddimg.cn/74/10/25178843-1_b_4.jpg",
          description: "汇编汇不汇编",
          category: {
              id: 3,
              name: '汇编与Dos',
              description: ''
          }
        }
      ];
      // TODO :学习他的getRequest用法
    //   getRequest("/admin/user?nickname=" + this.keywords).then(
    //     resp => {
    //       _this.loading = false;
    //       if (resp.status == 200) {
    //         _this.users = resp.data;
    //       } else {
    //         _this.$message({ type: "error", message: "数据加载失败!" });
    //       }
    //     },
    //     resp => {
    //       _this.loading = false;
    //       if (resp.response.status == 403) {
    //         var data = resp.response.data;
    //         _this.$message({ type: "error", message: data });
    //       }
    //     }
    //   );

        getRequest('book/all').then(
            resp => {
                _this.loading = false;
                if(resp.data.code == 0) {
                    _this.books = resp.data.data;
                    // for(let i = 0;i < _this.books.length;i++) {
                    //     Object.assign(_this.books[i], { count: 1 });
                    // }
                    _this.books.map((v,i)=>{
                        // v.count=0   刚开始这样赋值，不可行
                        _this.$set(v,'count',0)    //必须要这样赋值
                    });
                } else {
                    _this.loading = false;
                    _this.$message({ type: "error", message: "数据加载失败!" });
                }
            }
        );
    },
    handleChange(value) {

    },
    searchClick() {
      this.loading = true;
      this.loadUserList();
    },
    addCart(book) {
      let _this = this;
      myPostRequest('cart/add', {
          user_id: _this.$store.state.userId,
          book_id: book.id,
          book_num: book.count
      }).then(
          resp => {
              if(resp.data.code == 0) {
                  _this.$message({
                      message: '添加购物车成功！',
                      type: 'success'
                  });
              } else {
                  _this.$message.error('添加失败！');
              }
          }
      )
    }
  },
  data() {
    return {
      loading: false,
      eploading: [],
      cardloading: [],
      keywords: "",
      users: [],
      books: [],
      allRoles: [],
      roles: [],
      cpRoles: []
    };
  }
};
</script>
<style scoped>
    .wrap_one{
        overflow: hidden;
        -webkit-line-clamp: 4;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

</style>
